<script setup>
import { reactive, ref, onMounted, getCurrentInstance, nextTick } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import MainContent from '@/components/mainContent.vue'
// 获取实例和路由
const { proxy: { $http } } = getCurrentInstance()
const route = useRoute()
const router = useRouter()

// 流式输出相关数据
const fullText = ref("这是一个美丽的早晨，阳光灿烂。乌龟陶陶正坐在她那舒适的小洞前，吃着车前草的叶子。她的头顶上，是一棵古老的橄榄树，一对鸽子正在树上谈话:狮王二十八世要举行婚礼了，他邀请所有动物前去参加庆典。狮王的宫殿路途遥远，而庆典不久就要开始，必须马上动身。两只鸽子说完就飞走了。\n")
const displayedText = ref("")
const currentIndex = ref(0)
const isTyping = ref(false)
// 流式输出文字函数
const typeText = () => {
    if (currentIndex.value < fullText.value.length) {
        displayedText.value += fullText.value.charAt(currentIndex.value)
        currentIndex.value++
        setTimeout(typeText, 200)
    } else {
        isTyping.value = false
    }
}
// 开始流式输出
const startTyping = () => {
    displayedText.value = ""
    currentIndex.value = 0
    isTyping.value = true
    typeText()
}
// 页面加载时获取数据
onMounted(async () => {
    // 等待DOM更新后开始流式输出
    await nextTick()
    startTyping()
})
</script>

<template>

    <!-- 主体内容区域 -->
    <MainContent contentWidth="90%" bgColor="#ffffff" padding="24px">
        <template #content>
            <!-- 左右分栏容器：Flex 布局 -->
            <div class="content-layout">
                <!-- 左侧：文字区域 -->
                <div class="content-text">
                    <div class="text-content">
                        <p class="text-paragraph">
                            {{ displayedText }}
                            <span v-if="isTyping" class="cursor">|</span>
                        </p>
                    </div>
                </div>
                <!-- 右侧：图片区域 -->
                <div class="content-image">
                    <img src="@/assets/img/one.png" alt="教学系统功能展示" class="image-item" loading="lazy" />
                </div>
            </div>
        </template>
    </MainContent>

</template>

<style scoped lang='scss'>
.teacher-page {
    min-height: calc(100vh - 150px);
    background-color: #f5f7fa;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

// 左右分栏布局核心样式
.content-layout {
    display: flex;
    align-items: center;
    
    width: 100%;
    height: 80%;

    // 响应式适配：小屏幕（≤768px）切换为上下布局
    @media (max-width: 768px) {
        flex-direction: column;
        gap: 16px;
    }
}

// 左侧文字区域样式
.content-text {
    width: calc(100% - 390px); // 左侧宽度占比
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-right: 40px;

    // 响应式适配：小屏幕占满宽度
    @media (max-width: 768px) {
        width: 100%;
        text-align: center;
    }

    .text-content {
        color: #666;
        text-indent: 2em;
        font-family: KaiTi;
        font-weight: 400;
        font-style: Regular;
        font-size: 1.8rem;
            line-height: 4.2rem;
        letter-spacing: 20%;
        text-align: justify;

        .text-paragraph {
            margin: 0 0 20px 0;
            word-wrap: break-word;
            word-break: break-word;
            white-space: normal; // 允许正常换行

            &:last-child {
                margin-bottom: 0;
            }
        }
    }
}

// 中间分隔线样式
.content-divider {
    width: 2px;
    height: 400px;
    background-color: #000000;

    // 响应式适配：小屏幕改为水平分隔线
    @media (max-width: 768px) {
        width: 100%;
        height: 1px;
        margin: 8px 0;
    }
}

// 右侧图片区域样式
.content-image {
    width: 300px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    // 响应式适配：小屏幕占满宽度
    @media (max-width: 768px) {
        width: 100%;
    }

    .image-item {
        width: 300px;
        height: auto;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        object-fit: cover;
    }

    .image-desc {
        margin-top: 12px;
        color: #999;
        font-size: 12px;
        text-align: center;
    }
}

// 响应式调整
@media (max-width: 375px) {
    .main-content {
        padding: 16px;
    }

    .book-card {
        max-width: 240px;

        .book-cover {
            .cover-image {
                height: 240px;
            }
        }

        .start-teaching-btn {
            font-size: 16px;
            padding: 10px 20px;
        }
    }
}
</style>
